<template>
	<view 
		class="skeleton-item"
		:style="{
			width: width,
			height: height,
			borderRadius: round ? '50%' : '4rpx'
		}"
	></view>
</template>

<script setup>
defineProps({
	width: {
		type: String,
		default: '100%'
	},
	height: {
		type: String,
		default: '30rpx'
	},
	round: {
		type: Boolean,
		default: false
	}
})
</script>

<style lang="scss" scoped>
.skeleton-item {
	background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
	background-size: 400% 100%;
	animation: skeleton-loading 1.4s ease infinite, skeleton-fade-in 0.5s ease-out;
}

@keyframes skeleton-loading {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

@keyframes skeleton-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style> 